<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Css元素居中问题的实现</title>
    <style type="text/css">
        div{
            border: solid 1px #ccc;
        }
        pre{
            display: inline-block;
        }
        .wrap1{height:200px;line-height:200px;width:200px;background-color:red }
        .wrap1 .content{display: inline-block;vertical-align: middle;line-height: 15px;font-size: 14px}
        .wrap2{height:200px;line-height:200px;width:300px;background-color:yellow;font-size: 0 }
        .wrap2 img{vertical-align: middle;}
        .wrap3 img{vertical-align: middle;}
        .wrap3{height:200px;line-height:200px;width:300px;background-color:yellow;font-size: 0 }
        .wrap3 span{ display:inline-block;height:100%;vertical-align: middle;}
        .wrap4{
            height:200px;
            line-height:200px;
            width:300px;
            background-color:yellow;
            background-image: url("Header_Logo_1.png");
            background-position: center;
            background-size: 60%;
            background-repeat:no-repeat ;
        }
        .wrap5{height:200px;;width:300px;background-color:yellow;font-size: 0;display: table-cell;vertical-align: middle }
        .wrap6{height:200px;;width:300px;background-color:yellow;justify-content:center;display: flex;align-items: center }
       /* .wrap6 img{height: 88px;width: 88px}*/
        .wrap7{height:200px;;width:300px;background-color:yellow; }
        .wrap7:after{content: "";display: inline-block;height: 100%;vertical-align: middle}
         .wrap7 img{vertical-align: middle}
        .wrap8{height:200px;;width:300px;background-color:yellow; }
        .wrap8 .temp{height:50%;;opacity: 0;margin-bottom: -44px }
        .wrap8 img{height: 88px;width: 88px }
        .wrap9{height:200px;;width:300px;background-color:yellow;position: relative }
        .wrap9 img{height: 88px;width: 88px;position: absolute;top: 50%;left: 38%;right: 0;margin-top: -44px }
        .wrap10{height:200px;;width:300px;background-color:yellow;position: relative }
        .wrap10 img{position: absolute;top:0;bottom:0;left:0;right: 0;margin: auto }
        .wrap11{height:200px;;width:300px;background-color:yellow;position: relative;margin-bottom: 10px }
        .center{
            position: absolute;
            left: 50%;
            top:50%;
            -webkit-transform:translate3D(-50%,-50%,0);
            -ms-transform:translate3D(-50%,-50%,0);
            -moz-transform:translate3D(-50%,-50%,0);
            -o-transform:translate3D(-50%,-50%,0);
            transform:translate3D(-50%,-50%,0);
            z-index: 100;
        }
        .vertical-center{
            position: absolute;
            top:50%;
            -webkit-transform:translate3D(-50%,-50%,0);
            -ms-transform:translate3D(-50%,-50%,0);
            -moz-transform:translate3D(-50%,-50%,0);
            -o-transform:translate3D(-50%,-50%,0);
            transform:translate3D(-50%,-50%,0);
            z-index: 100;
        }
        .horizon-center{
            position: absolute;
            left:50%;
            -webkit-transform:translate3D(-50%,-50%,0);
            -ms-transform:translate3D(-50%,-50%,0);
            -moz-transform:translate3D(-50%,-50%,0);
            -o-transform:translate3D(-50%,-50%,0);
            transform:translate3D(-50%,-50%,0);
            z-index: 100;
        }
    </style>
</head>
<body>

<div style="margin: 0 auto;text-align: center">
    <div >
        <h1>一.文字的垂直居中</h1>
        <h4>1.单行文字</h4><pre>line-height和height高度相同</pre>

        <h4>2.多行文字</h4>
        <div style="margin-left: 39%;" class="wrap1">
            <span class="content">
                line1 <br/>line2
            </span>
        </div>
    </div>
    <div >
        <h1>二.图片的垂直居中</h1>
        <h4>1.通过line-height和vertical-align来实现垂直居中</h4>
        <div style="margin: 0 auto;" class="wrap2">
            <img src="Header_Logo_1.png" alt=""/>
        </div>
        <h4>2.通过100%height的span来实现垂直居中</h4>
        <div style="margin: 0 auto;" class="wrap3">
            <img src="Header_Logo_1.png" alt=""/><span></span>
        </div>
        <h4>3.背景图定位的方法</h4>
        <div style="margin: 0 auto;" class="wrap4">
        </div>
        <h4>4.通过table-cell来实现垂直居中</h4>
        <div  class="wrap5">
            <img src="Header_Logo_1.png" alt=""/>
        </div>
        <h4>5.通过flex弹性布局来实现垂直居中</h4>
        <div  style="margin: 0 auto;"class="wrap6">
            <img src="Header_Logo_1.png" alt=""/>
        </div>
        <h4>6.利用after伪类</h4>
        <div  style="margin: 0 auto;"class="wrap7">
            <img src="Header_Logo_1.png" alt=""/>
        </div>
        <h4>7.在已知图片高度的情况下借助额外的块级元素</h4><pre>透明不显示但是占位</pre>
        <div  style="margin: 0 auto;"class="wrap8">
            <div class="temp"></div>
            <img src="Header_Logo_1.png" alt=""/>
        </div>
        <h4>8.在已知图片高度的情况下借助margin-top负边距</h4>
        <div  style="margin: 0 auto;"class="wrap9">
            <img src="Header_Logo_1.png" alt=""/>
        </div>
        <h4>9.在已知图片高度的情况下借助绝对定位</h4>
        <div  style="margin: 0 auto;"class="wrap10">
            <img src="Header_Logo_1.png" alt=""/>
        </div>
        <h4>10.万能的居中方式</h4>
        <h5>center</h5>
        <div  style="margin: 0 auto;"class="wrap11">
            <img class="center" src="Header_Logo_1.png" alt=""/>
        </div>
        <h5>horizon-center</h5>
        <div  style="margin: 0 auto;"class="wrap11">
            <img class="horizon-center" src="Header_Logo_1.png" alt=""/>
        </div>
        <h5>vertical-center</h5>
        <div  style="margin: 0 auto;"class="wrap11">
            <img class="vertical-center" src="Header_Logo_1.png" alt=""/>
        </div>
    </div>
</div>
</body>
</html>